<template>
  <div class="main">
    <div class="operation-bar">
      <div class="left">
        <i class="fa fa-arrow-left" title="后退" @click="back"></i>
        <i class="fa fa-arrow-right" title="前进" @click="forward"></i>
        <i class="fa fa-send" title="跳转" @click="loadInputUrlByCopy()"></i>
        <i class="fa fa-refresh" :class="{'turn':onWebLoading}" title="刷新" @click="refresh"></i>
        <input v-model="showUrl" @keyup.enter="loadInputUrl()" class="url-input" style="width: 70%;" />
        <i class="fa fa-bug" title="调试" @click="openDev()"></i>
      </div>
    </div>

    <div class="web-div">
      <webview v-on:did-start-loading="startLoading($event)" v-on:did-stop-loading="stopLoading($event)" id="webview" class="webview" :src="url"></webview>
    </div>
  </div>
</template>

<script>
var ipcRenderer;
var clipboard
if (window.require) {
  ipcRenderer = window.require("electron").ipcRenderer;
  clipboard = window.require('electron').clipboard;
}
export default {
  name: "",
  data() {
    return {
      onWebLoading: false,
      url: "",
      showUrl: ''
    };
  },
  watch: {
    showUrl(v) {
      if (ipcRenderer) {
        ipcRenderer.send("scan-main-url-refresh", v);
      }
    }
  },
  mounted() {
    this.url = this.getUrlKey("url");
    this.showUrl = this.url

    document.onkeydown = function (e) {
      var keyCode = e.keyCode || e.which || e.charCode;
      if (keyCode === 123) {
        ipcRenderer.send("open-dev-window");
      }
      return false;
    }
  },
  methods: {
    openDev() {
      ipcRenderer.send("open-dev-window");
    },
    getUrlKey(name) {
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    },
    //从拷贝粘贴
    loadInputUrlByCopy() {
      let url = clipboard.readText()
      if (url.length > 1000) {
        return
      }
      this.url = url
      var webview = document.getElementById("webview");
      webview.loadURL(this.url);
    },
    loadInputUrl() {
      var webview = document.getElementById("webview");
      webview.loadURL(this.url);
    },
    //加载完成时间
    stopLoading(e) {
      this.onWebLoading = false;
      var webview = document.getElementById("webview");
      var src = webview.getAttribute("src");
      this.showUrl = src;
    },
    startLoading(e) {
      this.onWebLoading = true;
      var webview = document.getElementById("webview");
      var src = webview.getAttribute("src");
      this.showUrl = src;
    },
    refresh() {
      var webview = document.getElementById("webview");
      webview.reloadIgnoringCache();
    },
    back() {
      var webview = document.getElementById("webview");
      if (webview.canGoBack()) {
        webview.goBack();
      }
    },
    forward() {
      var webview = document.getElementById("webview");
      if (webview.canGoForward()) {
        webview.goForward();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  .loading {
    transition: all 1s ease-in-out;
    left: 0;
    top: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    position: absolute;
    width: 100%;
    height: 100%;

    .icon {
      text-align: center;
      position: relative;
      top: 50%;

      i {
        animation: turn 1s linear infinite;
        font-size: 2rem;
        color: #3498db;
      }

      p {
        margin-top: 10px;
        color: #dbdbdb;
      }
    }
  }
  .operation-bar {
    display: flex;
    border-bottom: 1px rgb(221, 221, 221) solid;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-sizing: border-box;
    color: #7f8c8d;
    width: 100%;
    background: #ffffff;
    padding: 4px 10px;
    .url-input {
      width: 20rem;
      border: none;
      outline: none;
      background: #f5f5f5;
      padding: 4px 10px;
      color: #bdc3c7;
    }
    i {
      cursor: pointer;
      margin-right: 10px;
    }
    i:hover {
      color: #3498db;
    }

    .left {
      flex: 1;
    }
    .right {
      display: flex;
      .choice-user-div {
        margin-right: 10px;
        cursor: pointer;
      }
      i {
        line-height: 1.4rem;
      }
    }
    .fa-bug {
      margin-left: 10px;
    }
  }
  .web-div {
    position: relative;
    flex: 1;
    width: 100%;
    height: 100%;
    .webview {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
